<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{margin: 0;
			 padding: 0;
			 list-style: none;
			}
			img{
				vertical-align: top;
			}
			#slider{
				width: 750px;
				height: 320px;
				border: 1px solid #ccc;
				padding: 10px;
				margin: 100px auto;
				position: relative;
				
				
				
			}
			#top{
				width: 100%;
				height: 100%;
				position: relative;
				overflow: hidden;
				
			}
			#top ul{
				width: 4500px;
				height: 100%;
				position: relative;
				left: 0;
				top: 0;
				
			}
			#top ul li{
				width: 750px;
				height: 320px;
				float: left;
				
				
			}
			#slider ol{
				position: absolute;
				bottom: 0;
				right: 15px;		
			}
			#slider ol li{
				width: 20px;
				height: 20px;
				background-color: darkgray;
				border-radius: 50%;	
				display: inline-block;
				margin-right: 3px;
				cursor: pointer;
			}
			#slider ol li.current {
			    background-color: orangered;
			}
			
		</style>
	</head>
	<body>
		<div id="slider">
			<div id="top">
				<ul id="ul">
					<li><img src="../img/pic01.jpg" alt=""></li>
					<li><img src="../img/pic02.jpg" alt=""></li>
					<li><img src="../img/pic03.jpg" alt=""></li>
					<li><img src="../img/pic04.jpg" alt=""></li>
					<li><img src="../img/pic05.jpg" alt=""></li>
				</ul>
			</div>
			<div id="bottom">
				<ol id="ol">
					
				</ol>
			</div>
		</div>
		
		
		
		
		
		
		
	
		<script src="通用兼容文件.js"></script>
		<script>
			window.onload = function(){
				//设置变量
				var liindex = 0, ulindex =0;
				var timer  = null;
				//根据图片创建li
			var lis = $('ul').children;
			//克隆li标签
			$("ul").appendChild(lis[0].cloneNode(true));
			
			//创建li标签
			for(var i=0;i<lis.length-1;i++){
				var li = document.createElement('li');
				$('ol').appendChild(li);
			}
			//进入圆点li标签
			
			$('ol').children[0].className = 'current';
			//如果鼠标进入原点
			var ollis = $('ol').children;
			
			for(var j =0;j<ollis.length;j++){
				(function(j){
					var li = ollis[j];
				li.onmouseover = function(){
					for(var i=0;i<ollis.length;i++){
					ollis[i].className = '';	
				}	this.className = 'current';
					
				movex($('ul'),-750*j, 100)	
				liindex = ulindex =j;
					
					
				};
					
				})(j);
				
			}
			
		//设置轮播动画
		var timer =	setInterval(autoplay(),1000);
		
		$("slider").onmouseover = function () {
		    clearInterval(timer);
		};
		
		$("slider").onmouseout = function () {
		    timer = setInterval(autoplay, 1000);
		};	
			
			
		
				
				
		//轮播动画函数
			//图片动起来	
		function autoplay(){
			liindex++;
		if(liindex >lis.length-1){
			$("ul").style.left = 0;
			liindex = 1;
		}
		movex($("ul"), -liindex*750, 100);
			//圆圈动起来
			ulindex++;
			if(ulindex >ollis.length-1){
				ulindex =0;
			}
			for(var i=0 ;i<ollis.length;i++){
				ollis[i].className = "";
			}
			ollis[ulindex].className ='current';
	
		}		

}
			
			
		</script>
	</body>
</html>
